import React from "react";
import PaySVG from "../../../Common/svg/PaySVG";
import './index.css';
import DivChecked from "../../../Component/DivChecked";
import { Button } from 'antd';
import CommonBlue from "../../../Component/CommonBlue";
import TransactionAll from "../../../Common/svg/Transaction/All"
import TransactionFinish from "../../../Common/svg/Transaction/Finish"
import TransactionWaitDelivery from "../../../Common/svg/Transaction/WaitDelivery"
import TransactionWaitPay from "../../../Common/svg/Transaction/WaitPay"
import TransactionWaitReceive from "../../../Common/svg/Transaction/WaitReceive"
import ProductCard from "../../../Component/ProductCard";
import ShopServer from "../../../Server/Trade/ShopServer";
import UserCheck from "../../../utils/UserCheck";
import Protrait from "../../../Component/Protrait";
import Blank from "../../../Component/Blank";
import URL from "../../../Server/URL";
import MessageUtil from "../../../utils/MessageUtil";

export default class extends React.Component{
    
    constructor(props){
        super();
        let goods=[];
        this.state={
            usertype:0, //0买家 1卖家
            orderType:0, //0二手 1租赁
            orderStatus:"", //订单状态 0 待支付 1已支付待发货 2已发货 3派验机 4已收货 5已取消
            goods,
            buyBill:true,
            tranBill:false,

            tabAll:true,
            tabPaying:false,
            tabDeveliving:false,
            tabReceiving:false,
            tabFinish:false
        }
        this.Gen();
        
    }
    componentDidMount(){
        MessageUtil.ShowSuspention("TransactionBill");
    }
    componentWillUnmount(){
        MessageUtil.ShowSuspention("");
    }
    Gen(){
        let goods=[];

        ShopServer.ShopSelectShopOrder(this.state.usertype,this.state.orderType,
            this.state.orderStatus,UserCheck.GetUserID())
        .then(response=>{
            // console.log(response)
            response.data.forEach(i => {
                let mainPic="";
                let brand="";//品牌
                let type="";//类型
                let title="";//标题
                let price="";
                let insurence=false;
                let ca=false;
                let shopStateTitle="";
                let time=new Date();
                let shopStates=["待支付", "已支付待发货", "已发货", "派验机", "已收货", "已取消"];
                let rightButton="";
                switch(i.shopType){
                    case "0": //二手无人机
                        let data=i.SecondHandAircraft;
                        brand=data.aerocraftBrand;
                        type=data.aerocraftType;
                        mainPic=data.aerocraftImgUrl;
                        title=data.title;
                        price=data.price;
                        ca=data.cashDeposit>0;
                        insurence=data.insuranceStatus===0;
                        
                        let order=i.SecondHandOrder;
                        shopStateTitle=shopStates[order.status];
                        let orderTime=new Date(order.placeOrderTime);
                        time=orderTime;

                        //计算功能按钮
                        switch(order.status){
                            case "0":
                                rightButton=<span><Button type={"primary"} shape="round" style={{width:"8rem"}}>付款</Button></span>
                                break;
                            case "1":
                                rightButton=<span><Button type={"primary"} shape="round" style={{width:"8rem"}}>提醒发货</Button></span>
                                break;
                            case "2":
                                rightButton=
                                    <span>
                                        <Button type={""} shape="round" style={{width:"8rem", border:"solid #5393eb 1px"}}>查看物流</Button>
                                        <Button type={"primary"} shape="round" style={{width:"8rem",marginLeft:"0.5rem"}}>确认发货</Button>
                                    </span>
                                break;
                            case "3":
                                rightButton=
                                <span>
                                        <Button type={"primary"} shape="round" style={{width:"8rem",marginLeft:"0.5rem"}}>查看报告</Button>
                                </span>
                                break;
                            case "4":
                                rightButton=
                                    <span>
                                        <Button type={""} shape="round" style={{width:"8rem",color:"#5393eb", border:"solid #5393eb 1px"}}>查看物流</Button>
                                        <Button type={"primary"} shape="round" style={{width:"8rem",marginLeft:"0.5rem"}}>返货</Button>
                                    </span>
                                break;
                            case "5":
                                rightButton="";
                                break;
                            default:
                                break;
                        }
                        break;
                    case "1"://二手配件
                        break;
                    case "2"://租赁
                        break;
                    default:
                        break;
                }
                let badge=[];
                if(insurence){
                    badge.push(<img alt="Insurance" src="/assets/Good/Insurance.png"/>);
                }
                if(ca){
                    badge.push(<img alt="GuaranteeMoney" src="/assets/Good/GuaranteeMoney.png"/>)
                }


                goods.push(
                    <div>
                        <div className="flexContainer ant-card-body">
                            <Protrait src={URL.GetURL(i.userHead)}/>
                            <span  className="Transacation_UserName">{i.userName}</span>
                            <Blank/>
                            <span ><font color="#5393EB">{shopStateTitle}</font></span>
                        </div>
                        
                        <ProductCard
                            title={title}
                            subtitle={["品牌："+brand, "类型："+type,
                                        // "运费险",
                                        // "租用时间"
                                    ]}
                            priceText={price}
                            image={<img className="Transacation_DroneImg" alt="drone" src={URL.GetURL(mainPic)}/>}
                            badge={badge}
                            number={1}
                            time={time}
                            rightUpButton={rightButton}
                        />
                    </div>
                )
            });

            this.setState({
                goods
            },()=>{
                MessageUtil.ChangeHeight();
            })
        });
    }
    selectBuy(){
        this.setState({
            buyBill:true,
            tranBill:false,
            orderType:0,
        },()=>{
            this.Gen();
        });
    }
    selectTran(){
        this.setState({
            tranBill:true,
            buyBill:false,
            orderType:1, 
        },()=>{
            this.Gen();
        });
    }
    ChangeTab(type){
        //0 待支付 1已支付待发货 2已发货 3派验机 4已收货 5已取消
        let state="";
        this.setState({
            tabAll:false,
            tabPaying:false,
            tabDeveliving:false,
            tabReceiving:false,
            tabFinish:false
        },()=>{
            switch(type){
                case "":
                    this.setState({
                        tabAll:true
                    });
                    break;
                case 0:
                    this.setState({
                        tabPaying:true
                    });
                    state=0;
                    break;
                case 1:
                    this.setState({
                        tabDeveliving:true
                    });
                    state=1;
                    break;
                    case 2:
                        this.setState({
                            tabReceiving:true
                        });
                        state=2;
                        break;
                    case 3:
                        state=3;
                        break;
                    case 4:
                        this.setState({
                            tabFinish:true
                        });
                        state=4;
                        break;
                    case 5:
                        state=5;
                        break;
                    default:
                        break;
                }
                this.setState({
                    orderStatus:state
                },()=>{
                    this.Gen();
                })
        })
        
    }
    render(){
        let goodsInfo="";

        if(this.state.goods.length>0){
            goodsInfo= <div className="Transaction_Body">
                            {this.state.goods}
                        </div>;
        }
        else{
            goodsInfo=(
                <div>
                        <div className="Transaction_Body">
                                <div><img src="/assets/Trade/sad.png" alt="sas"/></div>
                                <div className="Transaction_Body_Text">您还没有想过的订单？</div>
                                <div className="Transaction_Body_Text">去<CommonBlue text={`"我的交易"`}/>逛逛吧!</div>
                            </div>
                        <div className="Transaction_Bottom">
                        <Button  style={{width:"182px"}} type="primary" shape="round"  size="large"  onClick={e=>this.state.finishExam()}>
                        确定
                        </Button>
                    </div>
                </div>
                
            )
        }
        return(
            <div className="Courseware_Body">
                <div>
                    <div></div>
                    <div className="Transacation_Container">
                        <div className="Transacation_Left">
                            <div className="Transacation_Title Transacation_Left_Title">
                                <span><PaySVG/></span>
                                <span className="Transacation_Left_Title_Text">交易内容选择</span>
                            </div>
                            <div className="Transacation_SelectTab">
                                <DivChecked DivActive={this.state.buyBill} title="购买订单" Change={e=>this.selectBuy(e)}/>
                                <DivChecked DivActive={this.state.tranBill } title="租赁订单" Change={e=>this.selectTran(e)}/>
                            </div>
                        </div>
                        <div className="Transacation_Right">
                            <div>
                                <img width="64px"  src="/assets/Trade/Byer.png" alt="by"/>
                            </div>
                            <div>
                                <span><font color="5393eb">我是买家</font></span>
                            </div>
                        </div>
                    </div>
                    <div className="Transaction_BtnList">
                    <span className="Transaction_Btn"><TransactionAll active={this.state.tabAll} Change={e=>this.ChangeTab("")}/></span>
                        <span className="Transaction_Btn"><TransactionWaitPay active={this.state.tabPaying} Change={e=>this.ChangeTab(0)}/></span>
                        <span className="Transaction_Btn"><TransactionWaitDelivery active={this.state.tabDeveliving} Change={e=>this.ChangeTab(1)}/></span>
                        <span className="Transaction_Btn"><TransactionWaitReceive active={this.state.tabReceiving} Change={e=>this.ChangeTab(2)}/></span>
                        <span className="Transaction_Btn"><TransactionFinish active={this.state.tabFinish} Change={e=>this.ChangeTab(4)}/></span>
                    </div>
                    {goodsInfo}
                    
                </div>
            </div>
        )
    }
}